<template>
	<view class="content">
		<view class="tab">
			<image @click="userinfo" style="width: 80rpx;height: 80rpx;border-radius: 50%;"
				src="../../static/ico/6f6bf0d1612dda491af.jpeg" mode=""></image>
			<text @click="connectSocket">{{ homeName }}</text>
		</view>
		<view class="text-area">
			<text @click="open">{{ textlist[num].title ? textlist[num].title : num }}</text>
			<image src="../../static/ico/bot.png" mode="" style="width: 25rpx; height: 16rpx;"></image>
		</view>
		<uni-popup ref="popup" type="top">
			<view class="popupbox">
				<view class="tab">
					<image @click="userinfo" style="width: 80rpx;height: 80rpx;border-radius: 50%;"
						src="../../static/ico/6f6bf0d1612dda491af.jpeg" mode=""></image>
					<text @click="connectSocket">{{ homeName }}</text>
				</view>
				<view class="text-area">
					<text @click="opento">{{ textlist[num].title ? textlist[num].title : num }}</text>
					<image src="../../static/ico/bot.png" mode="" style="width: 25rpx; height: 16rpx;"></image>
				</view>
				<view class="textlist">
					<text :class="index == num ? 'active' : ''" @click="rushList(index)"
						v-for="(item, index) in textlist" :key="index">{{ item.title }}</text>
				</view>
			</view>
		</uni-popup>
		<view class="text-area-bot">
			<text @click="getSelisPhone(index)" :class="{ active: index == parmas.h }" v-for="(item, index) in list"
				:key="index">{{ item.name }}</text>
		</view>
		<view class="box-mid">
			<view @click="activephone(index)"
				:class="item.whitephone == '../../static/ico/phonetwo.png' ? 'box-mid-active' : 'box-mid-content'"
				v-for="(item, index) in contentlist" :key="index">
				<view class="borderadius"
					:class="{ borderadiusgreen: item.type == 1, borderadiuscolorred: item.type == 2, borderadiuscolororgin: item.type == 0 }">
				</view>
				<image class="phoneimg" :src="item.whitephone" mode=""></image>
				<text class="box-mid-text">{{ item.code }}</text>
				<image class="activeimg" :src="item.active" mode=""></image>
			</view>
		</view>
		<view class="boxbot">
			<view class="boxbottab" @click="clickfn(index)" v-for="(item, index) in bottab" :key="index">
				<image :src="item.imgurl" mode=""></image>
				<text>{{ item.title }}</text>
			</view>
		</view>

		<uni-popup ref="appactive" type="bottom">
			<view class="apppopup">
				<view class="apppopup-app-box">
					<text v-for="(item, key) in appList" :class="{ active: item.select===true }" :key='key'
						@click="selectAll(key)">{{item.title}}</text>
				</view>
				<view class="apppopup-btn-box">
					<button type="default" size="mini">关闭APP</button>
					<button type="primary" size="mini">开启APP</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="more" type="bottom">
			<view class="moreactive">
				<text v-for="(item, index) in moreBtnList" :data-title="item.title" :key='index'
					@click="socketEvent">{{ item.title }}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		data() {
			return {
				parmas: {
					h: 0
				},
				homeName: '点击连接',
				phoneindex: [],
				phonelist: [],
				myfd: [],
				phoneac: '',
				show: true,
				list: [{
						name: '第一列'
					},
					{
						name: '第二列'
					},
					{
						name: '第三列'
					},
					{
						name: '第四列'
					},
					{
						name: '第五列'
					}
				],
				textlist: ['001', '002', '003', '004', '005'],
				num: 0,
				active: '第一列',
				activetwo: '',
				bottabcoppy: [{
						iconimgurl: '../../static/ico/721.png',
						imgurl: '../../static/ico/720.png'
					},
					{
						iconimgurl: '../../static/ico/stop2.png',
						imgurl: '../../static/ico/stop.png'
					},
					{
						iconimgurl: '../../static/ico/app1.png',
						imgurl: '../../static/ico/app.png'
					},
					{
						iconimgurl: '../../static/ico/playtwo.png',
						imgurl: '../../static/ico/play.png'
					},
					{
						iconimgurl: '../../static/ico/gengduotwo.png',
						imgurl: '../../static/ico/gengduo.png'
					}
				],
				bottab: [{
						title: '全选',
						imgurl: '../../static/ico/720.png'
					},
					{
						title: '一键暂停',
						imgurl: '../../static/ico/stop.png'
					},
					{
						title: 'APP选择',
						imgurl: '../../static/ico/app.png'
					},
					{
						title: '一键开始',
						imgurl: '../../static/ico/play.png'
					},
					{
						title: '更多',
						imgurl: '../../static/ico/gengduo.png'
					}
				],
				appList: [],
				contentlist: [],
				// 选择的app
				selectAppList: [],
				// 更多按钮列表
				moreBtnList: [],
				// Socket连接状态
				IsOpen:false,
				// 是否上线
				IsOnline:false, 
			};
		},
		onLoad() {},
		mounted() {
			const loginToken = uni.getStorageSync('uid')
			if (!loginToken || loginToken === '' || loginToken === undefined) {
				uni.reLaunch({
					url: '../login/regist/regist'
				})
			}
			this.getAppList() // 获取app列表
			this.getSelistDa() // 获取栏目列表
			this.getMoreBtn() // 获取更多按钮
		},
		methods: {
			// 连接websocket
			connectSocket() {
				uni.connectSocket({
					url: 'ws://139.159.159.92:1113',
				})
				uni.onSocketOpen(() => {
					// this.sendMsgSocket()
					this.IsOnline=true
				})

				uni.onSocketError(() => {
					uni.showToast({
						duration: 1500,
						icon: 'none',
						title: '连接失败，请重新连接'
					})
				})
				uni.onSocketMessage((res) => {
					res.data = JSON.parse(res.data) // 收到服务器返回消息  json字符串转换成json对象
					let pData = {
						yid: res.data.FD,
						tid: '',
						type: '',
						only: '1234567',
						code: '',
						username: uni.getStorageSync('username'),
					}
					if (res.data.code === 200) {
						this.homeName = '连接成功',
							uni.sendSocketMessage({
								data: JSON.stringify(pData)
							});
					}
				})
				uni.onSocketClose(function (res) {
					this.IsOnline=false
					this.homeName='点击重连'
				  console.log('WebSocket 已关闭！');
				})
			},
			

			// websocket发送消息
			// sendMsgSocket() {
			// 	if (1 === false) {
			// 		uni.sendSocketMessage({
			// 			data: {
			// 				fuid: [1, 2]
			// 			}
			// 		})
			// 	}
			// },

			activephone(index) {
				this.myfd = []
				if (this.contentlist[index].whitephone == '../../static/ico/phonetwo.png') {
					this.contentlist[index].whitephone = '../../static/ico/phone.png';
					this.phoneindex = this.phoneindex.filter((cur) => cur != index)
				} else {
					this.contentlist[index].whitephone = '../../static/ico/phonetwo.png';
					this.phoneindex.push(index);
				}
				//console.log('phoneindex', this.phoneindex)
				for (var i = 0; i < this.phoneindex.length; i++) {
					this.myfd.push(this.contentlist[this.phoneindex[i]]['fd'])
				}
			},

			userinfo() {
				uni.navigateTo({
					url: '../userinfo/userinfo'
				});
			},

			clickfn(index) {
				for (let var1 in this.bottab) {
					this.bottab[var1].imgurl = this.bottabcoppy[var1].imgurl;
				}
				this.bottab[index].imgurl = this.bottabcoppy[index].iconimgurl;

				if (index == 0) {
					this.show = !this.show;
					this.phoneindex = [];

					if (this.show) {
						for (let var1 in this.contentlist) {
							this.contentlist[var1].whitephone = '../../static/ico/phone.png';
						}
					} else {
						for (let var1 in this.contentlist) {
							this.contentlist[var1].whitephone = '../../static/ico/phonetwo.png';
							this.phoneindex.push(var1);
						}
						let arr = []
						for (let clist of this.contentlist) {
							arr.push(clist.fd)
						}
						this.myfd = arr
						console.log(this.myfd)
					}
					return false;
				}
				if (index == 1) {
					this.socketEvent()
					return false;
				}
				if (index == 2) {
					if (this.phoneindex.length <= 0) {
						uni.showModal({
							showCancel: false,
							title: '提示',
							content: '请先选择手机！'
						});
						return false;
					}
					this.$refs.appactive.open();
					return false;
				}
				if (index == 3) {
					this.socketEvent()
					return false;
				}
				if (index == 4) {
					this.socketEvent()
					this.$refs.more.open();
					return false;
				}
			},
			open() {
				this.$refs.popup.open();
			},
			opento() {
				this.$refs.popup.close();
			},

			// 切换栏目
			rushList(index) {
				this.num = index;
				this.$refs.popup.close();
				this.getList(this.textlist[index].id)
			},


			// 获取栏目列表
			getSelistDa() {
				this.$api({
					type: 'POST',
					url: '/index/index/selistda',
					data: {
						uname: 15286072493
					}
				}).then((res) => {
					if (res.code === 200) {
						this.textlist = res.data
						this.getList(this.textlist[0].id) // 获取手机列表
					}
				})
			},

			// 获取数据列表
			getList(fuidName) {
				this.$api({
					type: 'POST',
					url: '/index/index/listdata',
					data: {
						// uid: uni.getStorageSync('uid'),
						uid: 21,
						fuid: fuidName,
						h: 1
					}
				}).then((res) => {
					if (res.code === 200) {
						res.data.forEach((item, key) => {
							item.whitephone = '../../static/ico/phone.png'
							item.active = '../../static/ico/227.png'
						})
						this.contentlist = res.data
					}
				})
			},

			// 获取数据列表列
			getSelisPhone(h) {
				this.parmas.h = h // 设置选中的列数
				h = h + 1 // 上传的参数h需+1
				this.$api({
					type: 'POST',
					url: '/index/index/selisphone',
					data: {
						// uid: uni.getStorageSync('uid'),
						uid: 21,
						fuid: this.textlist[this.num].id,
						h: h
					}
				}).then((res) => {
					if (res.code === 200) {
						res.data.forEach((item, key) => {
							item.whitephone = '../../static/ico/phone.png'
							item.active = '../../static/ico/227.png'
						})
						this.contentlist = res.data
					}
				})
			},

			// 获取APP选择列表
			getAppList() {
				this.$api({
					type: 'POST',
					url: '/index/sheels/moreapp'
				}).then((res) => {
					if (res.code === 200) {
						res.data.forEach((item, key) => {
							res.data[key].select = false
						})
						this.appList = res.data
					}
				})
			},

			// APP选择中 多选app
			selectAll(index) {
				if (this.appList[index].select === false) {
					this.appList[index].select = true
					this.selectAppList.push(index)
					let title = this.appList[index]['title'];
					let fd = this.myfd;
					this.pdata(title, fd);
				} else {
					this.appList[index].select = false
					this.selectAppList.forEach((item, key) => {
						if (item === index) {
							this.selectAppList.splice(key, 1)
						}
					})
				}
			},

			//  获取更多按钮列表
			getMoreBtn() {
				this.$api({
					url: '/index/sheels/more',
					type: 'POST'
				}).then((res) => {
					if (res.code === 200) {
						this.moreBtnList = res.data
					}
				})
			},
			// 按钮事件
			socketEvent(e) {
				if (this.phoneindex.length <= 0) {
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '请先选择手机！'
					});
					return false;
				} else {
					if (e != null) {
						let title = e.currentTarget.dataset.title;
						let fd = this.myfd;
						this.pdata(title, fd);
					}
				}
			},
			// websocket发送消息
			pdata: function(title, fd) {
				let message = {
					content: title,
					tid: fd,
					type: "",
				}
				console.log(message);
				uni.sendSocketMessage({
					data: JSON.stringify(message)
				});
			},

		}
	};
</script>

<style lang="less">
	.content {
		.moreactive {
			float: right;
			margin-bottom: 160rpx;
			width: 25%;
			// height: 300rpx;
			background: #ffffff;
			margin-right: 60rpx;
			box-shadow: 0px 0px 19rpx 1rpx rgba(1, 128, 255, 0.18);
			border-radius: 10rpx;

			text {
				margin: 0 20rpx;
				padding: 15rpx 0;
				box-sizing: border-box;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				display: block;
				border-bottom: 1rpx solid #eeeeee;

				&:last-child {
					border: none;
				}
			}
		}

		.apppopup {
			margin: 0 auto;
			margin-bottom: 160rpx;
			box-shadow: 0px 0px 19rpx 1rpx rgba(1, 128, 255, 0.18);
			border-radius: 10rpx;
			width: 80%;
			height: 500rpx;
			background: #ffffff;

			text {
				display: block;
				flex: 1;
			}

			.active {
				color: #0180ff;
			}

			.apppopup-btn-box {
				width: 100%;
				display: flex;
				justify-content: space-around;
				height: 60rpx;

				button {
					width: 50%;
					border-radius: 0;
					border: none;
				}
			}

			.apppopup-app-box {
				height: 440rpx;
				display: flex;
				flex-wrap: wrap;
				// align-items: center;
				justify-content: flex-start;
				text-align: center;
				padding: 10rpx;
				overflow: hidden;
				overflow-y: scroll;
			}
		}

		.tab {
			width: 100%;
			padding: 100rpx 0 20rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #f3f3f5;
			font-size: 36rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #333333;

			image {
				margin-left: 20rpx;
			}

			text {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.boxbot {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background: #ffffff;
			display: flex;
			justify-content: space-around;

			.boxbottab {
				text-align: center;
				width: 15%;
				height: 120rpx;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					display: block;
					margin: 0 auto;
					margin-top: 20rpx;
					width: 42rpx;
					height: 42rpx;
				}

				&:nth-child(5) {
					image {
						width: 8rpx;
					}
				}
			}
		}

		.box-mid {
			margin-top: 10rpx;
			padding: 10rpx 20rpx 220rpx 20rpx;
			box-sizing: border-box;
			width: 100%;
			// min-height: calc(100vh - 524rpx);
			background: #f3f3f5;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.box-mid-active {
				background: #0180ff;

				text {
					font-size: 16rpx;
					font-family: PingFang SC;
					color: #ffffff;
				}
			}

			.box-mid-content {
				width: 25%;
				// max-height: 200rpx;
				background: #ffffff;

				text {
					font-size: 16rpx;
					font-family: PingFang SC;
					color: #333333;
				}
			}

			.box-mid-content,
			.box-mid-active {
				text-align: center;
				margin-top: 20rpx;
				width: 20%;
				padding: 20rpx 10rpx;
				box-shadow: 0px 14rpx 32rpx 0rpx rgba(0, 0, 0, 0.18);
				border-radius: 10rpx;
				position: relative;

				.borderadius {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					margin: 0;
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
				}

				.borderadiusgreen {
					background: #1baa10;
				}

				.borderadiuscolorred {
					background: #d41717;
				}

				.borderadiuscolororgin {
					background: #fc8966;
				}

				.phoneimg {
					margin: 0 auto;
					display: block;
					width: 46rpx;
					height: 70rpx;
				}

				.activeimg {
					display: block;
					margin: 0rpx auto;
					margin-top: 10rpx;
					width: 24rpx;
					height: 24rpx;
					border: 2rpx solid #999999;
				}
			}

			.box-mid-text {
				display: block;
				width: 100%;
				margin: 15rpx 0;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
			}
		}

		.popupbox {
			position: absolute;
			width: 100%;
			background: #ffffff;

			.textlist {
				text-align: center;

				text {
					padding: 20rpx 0;
					display: block;
					margin-right: 20rpx;
				}

				.active {
					color: #0180ff;
				}
			}
		}
	}

	.text-area {
		width: 100%;
		height: 100rpx;
		box-shadow: -2rpx 1rpx 2rpx 0rpx rgba(200, 200, 200, 0.18);
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			margin-right: 15rpx;
		}
	}

	.text-area-bot {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: -7rpx 10rpx 20rpx 0px rgba(0, 0, 0, 0.18);

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
			padding: 30rpx 0;
		}

		.active {
			color: #0180ff;
			border-bottom: 4rpx solid #0180ff;
		}
	}
</style>
